/* eslint-disable react-hooks/exhaustive-deps */
import React,{useEffect,useState} from 'react';
import { Swiper,Image } from 'antd-mobile'
import {getList,getBig,getSmall} from "../../../api"
import actions from "../../../store/actions"
import { connect,useDispatch } from 'react-redux'
import "./style.scss"
const colors = ['#d3f3f3', '#e1f1f1', '#f2f2f2', '#c4f4f4']
const items = colors.map((color, index) => (
    <Swiper.Item key={index}>
        <div style={{ background: color }}
            className={'content'}>
            {index + 1}
        </div>
    </Swiper.Item>
))

const Index = () => {
    const [list,setList]=useState([])
    const [big,setBig]=useState([])
    const [small,setSmall]=useState([])
    const getListAndSet=async()=>{
        const resp=await getList()
        setList(resp.data.data)
    }
    const getBigAndSet=async()=>{
        const resp=await getBig()
        setBig(resp.data.data)
    }
    const getSmallAndSet=async()=>{
        const resp=await getSmall()
        setSmall(resp.data.data)
    }
    // const dispatch=useDispatch()
    // const getListAndSet=async()=>{
    //     const resp=await getList()
    //     const action=actions.getList(resp.data.data)
    //     dispatch(action)
    // }
    useEffect(()=>{
        getListAndSet()
        getBigAndSet()
        getSmallAndSet()
    },[])
    return (
        <div>
            <Swiper autoplay>{items}</Swiper>
            <div className="iconsWraps">
                {
                    // console.log(list)
                    list.map((v,i)=>{
                        return(
                            <dl key={i}>
                                <dt><Image lazy src={v.img}/></dt>
                                <dd>{v.tit}</dd>
                            </dl>
                        )
                    })

                }
            </div>
            <h3>一秒选花</h3>
            <div className="bigWrap">
                {
                    big.map((v,i)=>{
                        return(
                            <dl key={i}>
                                <dt><Image lazy src={v.img}/></dt>
                                <dd>{v.tit}</dd>
                            </dl>
                        )
                    })
                }
            </div>
            <div className="smallWrap">
                {
                    small.map((v,i)=>{
                        return(
                            <dl key={i}>
                                <dt><Image lazy src={v.img}/></dt>
                                <dd>{v.tit}</dd>
                            </dl>
                        )
                    })
                }
            </div>
        </div>
    );
}

// const mapStateToProps = state => {
//     return{
//         ...state
//     }
// }

// const mapDispatchToProps =dispatch=> {
//     return{
//         ...dispatch
//     }
// }

// export default connect( mapStateToProps)(Index)
export default Index
